<template>
  <div>
    <h1>题目展示</h1>

    <!-- 展示选择题 -->
    <div>
      <h2>一. 单选题</h2>
      <div v-for="(item, index) in singleChoiceQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'single_choice'" class="options-container">
          <div v-for="(option, optionIndex) in item.details.split('\n')" :key="optionIndex" class="option-item">
            <span class="option-label">{{ option }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 展示填空题 -->
    <div>
      <h2>二. 填空题</h2>
      <div v-for="(item, index) in tianKongTiQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'tianKongTi'" class="blank-answer">
          <span class="answer-text">{{ item.answer }}</span>
        </div>
      </div>
    </div>

    <!-- 展示判断题 -->
    <div>
      <h2>三. 判断题</h2>
      <div v-for="(item, index) in trueFalseQuestions" :key="item.id" class="question-container">
        <div class="question-header">
          <h3>{{ index + 1 }}. {{ item.content }}</h3>
        </div>
        <div v-if="item.question_type === 'true_false'" class="judge-answer">
          <span class="answer-text">{{ item.answer === 'T' ? 'True' : 'False' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list1: [],
      singleChoiceQuestions: [], // 选择题
      tianKongTiQuestions: [],  // 填空题
      trueFalseQuestions: []    // 判断题
    };
  },
  mounted() {
    // 页面加载时获取题目数据
    this.fetchQuestions();
  },
  methods: {
    // 获取题目数据
    async fetchQuestions() {
      try {
        const assignmentId = this.$route.query.id; // 从前端路由中获取 assignmentId
        console.log(assignmentId)
        const response = await axios.get(`http://localhost:80/questions/assignment/${assignmentId}`);
        if (response.data.code === 0) {
          this.list1 = response.data.data;
          // 按题型分类
          this.singleChoiceQuestions = this.list1.filter(item => item.question_type === 'single_choice');
          this.tianKongTiQuestions = this.list1.filter(item => item.question_type === 'tianKongTi');
          this.trueFalseQuestions = this.list1.filter(item => item.question_type === 'true_false');
        } else {
          console.error("获取题目失败:", response.data.message);
        }
      } catch (error) {
        console.error("获取题目失败:", error);
      }
    }
  }
};
</script>

<style scoped>
.question-container {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-header {
  margin-bottom: 12px;
}

.question-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-item {
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-size: 16px;
  color: #666;
}

.blank-answer {
  margin-top: 8px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-size: 16px;
  color: #666;
}

.judge-answer {
  margin-top: 8px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
  font-size: 16px;
  color: #666;
}

.answer-text {
  font-weight: bold;
}

h2 {
  font-size: 22px;
  color: #333;
  margin: 24px 0 16px;
  text-align: center;
}
</style>